<template>
    <div class="modern-template">
        <!-- Header Section -->
        <header class="header">
            <div class="header-content">
                <div class="avatar-section">
                    <img :src="state.user_avatar" alt="avatar" class="avatar-img">
                </div>
                <div class="header-text">
                    <h1>{{ state.base_info.content.name }}</h1>
                    <div class="job-title">{{ state.job_interest }}</div>
                    <div class="contact-info">
                        <span><i class="fas fa-user"></i>{{ state.base_info.content.gender }}</span>
                        <span><i class="fas fa-phone"></i>{{ state.base_info.content.phone }}</span>
                        <span><i class="fas fa-envelope"></i>{{ state.base_info.content.email }}</span>
                    </div>
                </div>
            </div>
        </header>

        <!-- Self Evaluation -->
        <section class="section" v-if="state.self_evaluation.visiable">
            <h2 class="section-title">自我评价</h2>
            <div class="section-content">
                <p>{{ state.self_evaluation.content.self_evaluation }}</p>
            </div>
        </section>

        <!-- Education -->
        <section class="section" v-if="state.educational_experience.visiable">
            <h2 class="section-title">教育经历</h2>
            <div class="section-content">
                <div v-for="(edu, index) in state.educational_experience.content.educational_experience" 
                     :key="index"
                     class="education-item">
                    <div class="edu-header">
                        <h3>{{ edu.attend_school }}</h3>
                        <span class="time">{{ formatDate(edu.begin_date) }} - {{ formatDate(edu.end_date) }}</span>
                    </div>
                    <div class="edu-details">
                        <p>{{ edu.major }} | {{ edu.degree }}</p>
                        <p class="achievements">成绩：{{ edu.grades }}</p>
                        <p class="courses">主修课程：{{ edu.major_courses.join('、') }}</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Skills -->
        <section class="section" v-if="state.expertise.visiable">
            <h2 class="section-title">专业技能</h2>
            <div class="section-content skills-grid">
                <div v-for="(skill, index) in state.expertise.content.expertise" :key="index" class="skill-item">
                    {{ skill }}
                </div>
            </div>
        </section>

        <!-- Projects -->
        <section class="section" v-if="state.project_experience.visiable">
            <h2 class="section-title">项目经历</h2>
            <div class="section-content">
                <div v-for="(project, index) in state.project_experience.content.project_experience" 
                     :key="index" 
                     class="project-item">
                    <div class="project-header">
                        <h3>{{ project.project_name }}</h3>
                        <span class="time">{{ project.time }}</span>
                    </div>
                    <div class="project-description">{{ project.project_description }}</div>
                </div>
            </div>
        </section>
    </div>
</template>

<script setup lang="ts">
import { useStore } from '../../store/store'
import { computed } from 'vue'

const store = useStore()
const state = computed(() => store)

function formatDate(date: Date | string | undefined) {
    if (!date) return '';
    const d = new Date(date);
    return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}`;
}
</script>

<style scoped lang="scss">
.modern-template {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;

    .header {
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        border-bottom: 2px solid #f0f0f0;

        .header-content {
            display: flex;
            align-items: center;
            gap: 2rem;

            .avatar-section {
                .avatar-img {
                    width: 120px;
                    height: 120px;
                    border-radius: 50%;
                    object-fit: cover;
                    border: 3px solid #fff;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                }
            }

            .header-text {
                flex: 1;

                h1 {
                    font-size: 2.5rem;
                    color: #2c3e50;
                    margin: 0;
                }

                .job-title {
                    font-size: 1.2rem;
                    color: #3498db;
                    margin: 0.5rem 0;
                }

                .contact-info {
                    display: flex;
                    gap: 1.5rem;
                    color: #666;

                    span {
                        display: flex;
                        align-items: center;
                        gap: 0.5rem;

                        i {
                            color: #3498db;
                        }
                    }
                }
            }
        }
    }

    .section {
        margin-bottom: 2rem;
        padding: 1rem;
        background: #fff;
        border-radius: 8px;
        transition: transform 0.2s;

        &:hover {
            transform: translateY(-2px);
        }

        .section-title {
            color: #2c3e50;
            font-size: 1.5rem;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #3498db;
        }

        .section-content {
            color: #666;
            line-height: 1.6;
        }
    }

    .skills-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;

        .skill-item {
            background: #f8f9fa;
            padding: 0.8rem;
            border-radius: 4px;
            text-align: center;
            border: 1px solid #e9ecef;
            transition: all 0.2s;

            &:hover {
                background: #e9ecef;
                transform: translateY(-2px);
            }
        }
    }

    .project-item {
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid #eee;

        &:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .project-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;

            h3 {
                color: #2c3e50;
                margin: 0;
            }

            .time {
                color: #666;
                font-size: 0.9rem;
            }
        }

        .project-description {
            color: #666;
            line-height: 1.6;
        }
    }

    .education-item {
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid #eee;

        &:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .edu-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;

            h3 {
                color: #2c3e50;
                margin: 0;
                font-size: 1.1rem;
            }

            .time {
                color: #666;
                font-size: 0.9rem;
            }
        }

        .edu-details {
            p {
                margin: 0.3rem 0;
                color: #333;

                &.achievements {
                    color: #666;
                    font-size: 0.9rem;
                }

                &.courses {
                    color: #666;
                    font-size: 0.9rem;
                    line-height: 1.4;
                }
            }
        }
    }
}
</style>
